<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="first">
        <template #label>
          <span><i class="el-icon-date"></i>航班时刻表</span>
        </template>
        <flight-schedule></flight-schedule>
      </el-tab-pane>
      <el-tab-pane name="second">
        <template #label>
          <span><i class="el-icon-date"></i>航班动态</span>
        </template>
        <flight-search></flight-search>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import FlightSchedule from './FlightSchedule/Index.vue';
import FlightSearch from './FlightSearch/Index.vue';
export default defineComponent({
  name: 'FlightStatus',
  components: {
    FlightSchedule,
    FlightSearch,
  },
  setup() {
    const activeName = ref('first');
    const handleClick = () => {
      console.log('activeName: ', activeName);
    };
    return {
      activeName,
      handleClick,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
@import '@/assets/css/tabs-top.scss';
:deep(.el-tabs__item) {
  width: 50% !important;
}
:deep(.el-tabs__active-bar) {
  width: 350px !important;
  margin-left: 10px !important;
}
</style>
